// 引入 React, useEffect 和 useRef hook，以及 Three.js 库
import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// 创建一个 ThreeJsScene 组件
const ThreeJsScene = () => {
  // 使用 useRef 创建一个 ref，用于挂载 Three.js 的渲染器
  const mountRef = useRef(null);

  // 使用 useEffect 来设置 Three.js 场景
  useEffect(() => {
    // 创建一个新的 Three.js 场景
    const scene = new THREE.Scene();
    
    // 创建一个透视相机，定义视野角度、长宽比、近剪切面和远剪切面
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    
    // 创建一个 WebGL 渲染器，并将其大小设置为窗口大小
    const renderer = new THREE.WebGLRenderer();
    // renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setSize(800, 600);
    
    // 将渲染器的 DOM 元素添加到 ref 所指向的 DOM 节点
    if (mountRef.current) {
      mountRef.current.appendChild(renderer.domElement);
    }

    // 创建一个长方体几何体
    const geometry = new THREE.BoxGeometry();
    
    // 创建一个基础网格材质，并设置颜色为绿色
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    
    // 创建一个网格，使用上面定义的几何体和材质
    const cube = new THREE.Mesh(geometry, material);
    
    // 将网格添加到场景中
    scene.add(cube);
    
    // 设置相机的位置，使其从远处观察场景
    camera.position.z = 5;
// 创建一个方向光对象，指定颜色和强度
const directionalLight = new THREE.DirectionalLight(0xffffff, 22);

// 设置方向光的方向
directionalLight.position.set(0, -1, 0);

// 将方向光添加到场景中
scene.add(directionalLight);
    // 定义一个动画函数，用于在每一帧更新网格的旋转
    const animate = () => {
      // 请求动画帧，这样可以保证动画的流畅性
      requestAnimationFrame(animate);

      // 更新网格的旋转
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    //   cube.scale.x += 0.1; // 缩放x轴为2倍

      // 使用渲染器渲染场景和相机
      renderer.render(scene, camera);
    };

    // 调用动画函数开始动画
    animate();
    console.log(`scene`,scene)
    const loader = new GLTFLoader();
    loader.load('/models/scene.glb', function(gltf) {
        const model = gltf.scene;
        console.log(`model`,model)
        scene.add(model);
        renderer.render(scene, camera);
      }, undefined, function(error) {
        console.error(error);

      });


      
    // 清理函数，用于在组件卸载时移除渲染器的 DOM 元素
    return () => {
      if (mountRef.current) {
        mountRef.current.removeChild(renderer.domElement);
      }
    };
  }, []); // useEffect 的依赖项数组为空，表示这个 effect 只会在组件挂载和卸载时执行

  // 返回一个 div 元素，用于挂载 Three.js 的渲染结果
  return <div style={{ width: '100%', height: '100%' }}ref={mountRef} />;
};

// 导出 ThreeJsScene 组件
export default ThreeJsScene;
